<template>
    <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
        <div>
            <svg-icon class-name="international-icon" icon-class="language"/>
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
            <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
    export default {
        computed: {
            language() {
                return this.$store.getters.language
            }
        },
        methods: {
            handleSetLanguage(lang) {
                this.$i18n.locale = lang;
                this.$store.dispatch('setLanguage', lang);
                let msg = lang === 'zh' ? '语言切换成功！' : 'Switch Language Success!';
                // message 提示。
                this.$message({
                    message: msg,
                    type: 'success'
                })
            }
        }
    }
</script>

<style scoped>
    .international-icon {
        font-size: 20px;
        cursor: pointer;
        vertical-align: -5px !important;
    }
</style>

